<template>
  <ele-page>
    <base-search @search="reload"/>
    <ele-card :body-style="{ paddingTop: '8px' }">
      <!-- 表格 -->
      <ele-pro-table
        ref="tableRef"
        row-key="id"
        :columns="columns"
        :datasource="datasource"
        :show-overflow-tooltip="true"
        v-model:selections="selections"
        highlight-current-row
        cache-key="systemBaseTable"
        @row-dblclick="dblclick"
        :loadOnCreated="false"
      >
        <template #toolbar>
        </template>
        <template #studentRecommendSubmit="{ row }">
          <el-tag size="small" type="primary" v-if="row.studentRecommendSubmit == '0'">已提交</el-tag>
          <el-tag size="small" type="danger" v-else>未提交</el-tag>
        </template>
        <template #counselorRecommendCheck="{ row }">
          <el-switch
            size="small"
            :model-value="row.counselorRecommendCheck == '0'"
            @change="(checked) => updateCheck(checked, row)"
          />
        </template>
        <template #action="{ row }">
          <el-link type="success" :underline="false" @click="showRecommendInfoModal(row)">
            查看
          </el-link>
          <el-divider direction="vertical"/>
          <el-link type="primary" :underline="false" @click="showFillDepartmentOpinionModal(row)">
            填写意见
          </el-link>
        </template>
      </ele-pro-table>
    </ele-card>
    <show-info v-model="recommendInfoModalShow" v-if="recommendInfoModalShow" :data="currentStudentCode"></show-info>

    <fill-opinion v-model="fillDepartmentOpinionModalShow" v-if="fillDepartmentOpinionModalShow"
                  :data="currentStudentCode" @done="refresh"></fill-opinion>

  </ele-page>
</template>


<script setup>
import {ref} from 'vue';
import BaseSearch from "./components/search.vue";
import ShowInfo from "./components/show-info.vue";
import FillOpinion from "./components/fill-opinion.vue";
import {Delete, Download, Plus, Upload} from "@element-plus/icons-vue";
import {pageList, updateStudentRecommendCheck} from '@/api/manage/recommend/counsellor/index.js';
import {updateUserStatus} from "@/api/system/user/index.js";
import {EleMessage} from "ele-admin-plus";


/** 表格实例 */
const tableRef = ref(null);

/** 表格列配置 */
const columns = ref([
  {
    prop: 'code',
    label: '学号',
    align: 'center',
    minWidth: 110
  },
  {
    prop: 'name',
    label: '姓名',
    align: 'center',
    minWidth: 110
  },
  {
    prop: 'campus',
    label: '校区',
    align: 'center',
    minWidth: 110
  },
  {
    prop: 'grade',
    label: '年级',
    align: 'center',
    minWidth: 110
  },
  {
    prop: 'major',
    label: '专业',
    align: 'center',
    minWidth: 110
  },
  {
    prop: 'studyState',
    label: '学籍状态',
    align: 'center',
    minWidth: 110
  },
  {
    prop: 'studentRecommendSubmit',
    label: '学生提交状态',
    minWidth: 110,
    align: 'center',
    slot: 'studentRecommendSubmit'
  },
  {
    prop: 'counselorRecommendCheck',
    label: '审核状态',
    width: 90,
    align: 'center',
    slot: 'counselorRecommendCheck'
  },
  {
    columnKey: 'action',
    label: '操作',
    width: 180,
    align: 'center',
    slot: 'action'
  }
]);

/** 表格选中数据 */
const selections = ref([]);

/** 表格数据源 */
const datasource = ({page, limit, where}) => {
  return pageList({...where, pageNum: page, pageSize: limit});
};

/** 搜索 */
const reload = (where) => {
  tableRef.value?.reload?.({page: 1, where});
};


const tempFun = (where) => {
  console.log("临时方法");
}


const currentStudentCode = ref(null);

//显示/隐藏学生推荐表信息modal的标识
const recommendInfoModalShow = ref(false);

//查看推荐表填写情况
const showRecommendInfoModal = (row) => {
  // console.log("click", row);
  currentStudentCode.value = row.code;
  recommendInfoModalShow.value = true;
}


//显示/隐藏填写所在系意见modal的标识
const fillDepartmentOpinionModalShow = ref(false);

//显示填写所在系意见
const showFillDepartmentOpinionModal = (row) => {
  currentStudentCode.value = row.code;
  fillDepartmentOpinionModalShow.value = true;

}

//审核学生推荐表信息
const updateCheck = (checked, row) => {
  const status = checked ? '0' : '1';
  updateStudentRecommendCheck(row.code, status)
    .then((msg) => {
      row.counselorRecommendCheck = status;
      EleMessage.success(msg);
    })
    .catch((e) => {
      EleMessage.error(e.message);
    });
}

//表格双击事件
const dblclick = (row) => {
  showRecommendInfoModal(row);
}

//刷新当前表格
const refresh = () => {
  tableRef.value.reload();
}


</script>
